<!DOCTYPE HTML>
<head>
    <title>美价网后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Baxster Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="../css/style.css" rel='stylesheet' type='text/css'/>
    <!-- font-awesome icons -->
    <link href="../css/font-awesome.css" rel="stylesheet">
    <!-- js-->
    <script src="../js/jquery-1.11.1.min.js"></script>
    <!-- Metis Menu -->
    <script src="../js/metisMenu.min.js"></script>
    <script src="../js/custom.js"></script>
    <link href="../css/custom.css" rel="stylesheet">
    <!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div id="content" class="main-content">
    <!-- header-starts -->
    <div class="row" style="border: 2px solid rgba(0,0 ,0 ,0.2)">
        <div class="header-left col-sm-3">
            <!--logo -->
            <div class="logo">
                <a href="#">
                    <ul>
                        <li><img src="../images/logo1.png" alt=""/></li>
                        <li><h1>模块监控</h1></li>
                        <div class="clearfix"></div>
                    </ul>
                </a>
            </div>
        </div>
        <div>
            <div style="height: 50px;"></div>
            <button data-target="#myModal" data-toggle="modal" class="btn-sm btn-success">新增模块</button>
        </div>
        <!--search-box-->
        <div class="search-box">
            <form class="input">
                <input class="sb-search-input input__field--madoka" placeholder="Search..." type="search"
                       id="input-31"/>
            </form>
        </div>
        <!--//end-search-box-->
    </div>

    <!-- //header-ends -->
    <div class="row">
        <div class="col-sm-10">
            <table class="table">
                <thead>
                <tr style="font-size: 8px">
                    <th style="width: 100px">序号</th>
                    <th style="width: 250px">模块名称</th>
                    <th style="width: 150px">ip地址</th>
                    <th style="width: 100px">端口</th>
                    <th style="width: 160px">网络延迟</th>
                    <th style="width: 160px">带宽占用</th>
                    <th style="width: 200px">内存占用</th>
                    <th style="width: 160px">CPU占用</th>
                    <th style="width: 130px">运行情况</th>
                    <th style="width: 350px">操作</th>
                </tr>
                </thead>
                <tbody v-for="(moduleInfo,index) in moduleInfos">
                <tr>
                    <td>{{index+1}}</td>
                    <td>{{moduleInfo.moduleName}}</td>
                    <td>{{moduleInfo.moduleIp}}</td>
                    <td>{{moduleInfo.modulePort}}</td>
                    <td>{{moduleInfo.moduleLatency}}<span v-if="moduleInfo.moduleLatency!=null">ms</span></td>
                    <td>{{moduleInfo.occupiedRateOfBandwidth}}</td>
                    <td>{{moduleInfo.occupiedRateOfMemory}}</td>
                    <td>{{moduleInfo.occupiedRateOfCpu}}<span v-if="moduleInfo.occupiedRateOfCpu!=null">%</span></td>
                    <td  v-if="moduleInfo.moduleCondition==true" style="width: 130px"><i style="color: green"
                                                                   class="glyphicon glyphicon-ok"></i></td>
                    <td  v-else style="width: 130px"><i style="color: red"
                                  class="glyphicon glyphicon-remove"></i></td>

                    <td>
                        <button class="btn-success" :data-moduleName="moduleInfo.moduleName"
                                :data-moduleIp="moduleInfo.moduleIp" :data-modulePort="moduleInfo.modulePort"
                                @click="updateModule">编辑
                        </button>
                        <button class="btn-danger" :data-id="moduleInfo.id" @click="deleteModule">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--left-fixed -navigation-->
        <div class="sidebar col-sm-2" role="navigation">
            <div class="navbar-collapse collapse">
                <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right dev-page-sidebar mCustomScrollbar _mCS_1 mCS-autoHide mCS_no_scrollbar"
                     id="cbp-spmenu-s1">
                    <div class="scrollbar scrollbar1">
                        <ul class="nav in" style="display: block" id="side-menu">
                            <li>
                                <a href="module-monitoring.html"><i class="fa fa-home nav_icon"></i>模块监控</a>
                            </li>
                            <li>
                                <a href="evaluateModule.html"><i class="fa fa-cogs nav_icon"></i>商品评价模型</a>
                            </li>
                            <li>
                                <a href="validateProduct.html"><i class="fa fa-check-square-o nav_icon"></i>异常商品信息处理</a>
                            </li>
                        </ul>
                    </div>
                    <!-- //sidebar-collapse -->
                </nav>
            </div>
        </div>
        <!--left-fixed -navigation-->
    </div>

    <!--footer-->
    <div class="dev-page">
        <!-- page footer -->
        <!-- dev-page-footer-closed dev-page-footer-fixed -->
        <div class="dev-page-footer dev-page-footer-fixed">
            <!-- container -->
            <div class="container">
                <div class="copyright">
                    <p></p>
                </div>
                <!-- page footer container -->
                <div class="dev-page-footer-container">
                    <!-- loader and close button -->
                    <div class="dev-page-footer-container-layer">
                        <a href="#" class="dev-page-footer-container-layer-button"></a>
                    </div>
                    <!-- //loader and close button -->
                </div>
                <!-- //page footer container -->
            </div>
            <!-- //container -->
        </div>
        <!-- /page footer -->
    </div>
    <!--//footer-->
</div>

<!-- 新增节点模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    新增模块信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-2"></div>
                    模块名称:<input v-model="moduleName" type="text"/>
                </div>
                <div class="row">
                    <div class="col-sm-2"></div>
                    模块ip地址:<input v-model="moduleIp" type="text"/>
                </div>
                <div class="row">
                    <div class="col-sm-2"></div>
                    模块端口号:<input v-model="modulePort" type="text"/>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button class="btn btn-primary" @click="addModule" data-dismiss="modal">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet">

<script src="../js/vue.min.js"></script>
<script src="../js/management/module-monitoring.js"></script>
</body>
</html>